{% extends "base.html" %}


{% block content %}


<div class="multicol">

{% for g in genres %}

<button type=button class="bigbutton multicolitem" genre="{{g.name}}">
{{g.value}}
</button>

{% end %}

</div>

<div class=medium>
Columns: <select class=medium>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>

<script>

$(function() {
    console.log("media setup");

    function ButtonClick() {
         var genre = $(this).attr("genre");
         console.log("genre: " + genre);
         window.location.href = "/genre?" + $.param({genre: genre})
    }

    $("button").click(ButtonClick);

    function ColumnsChanged() {
      var n = $("select").attr("value");
      console.log("change moz" + n);
      $(".multicol").css("-moz-column-count", "" + n);
      console.log("change webkit" + n);
      $(".multicol").css("-webkit-column-count", "" + n);
    }

    $("select").change(ColumnsChanged);


   function SetColumns(n) {
       console.log("set columns " + n);

       function SetSelected(i, e) {
           if (i+1 == n) {
               e.selected = true;
           } else {
               e.selected = false;
           }
       }

       $("option").each(SetSelected);
   }

   var columns = $("body").width() / 300;
   if (columns < 1) columns = 1;
   SetColumns(Math.floor(columns));
   ColumnsChanged($("select"));
});

</script>


{% end %}
